﻿<script src="~/Scripts/DashboardControllers/OrganizationDashboardController.js"></script>
<script src="~/Scripts/Directives/ChartDirectives.js"></script>
<div ng-controller="OrganizationDashboardController">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="bg-gray bs-0 mb-20 clearfix">
                <div class="pull-left bg-op p-15 text-center">
                    <div class="easy-pie-chart fs-30" data-percent="60" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                        <i class="fa fa-user-plus"></i>
                    </div>
                </div>
                <div class="pull-left p-10">
                    <h5 class="m-0 fs-16 text-uppercase lh-1">Church Workers</h5>
                    <span class="fw-600 fs-30 ">{{chuchinfo.TotalPastors}}</span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="bg-success bs-0 mb-20 clearfix">
                <div class="pull-left bg-op p-15 text-center">
                    <div class="easy-pie-chart fs-30" data-percent="10" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                        <i class="fa fa-building"></i>
                    </div>
                </div>
                <div class="pull-left p-10">
                    <h5 class="m-0 fs-16 text-uppercase lh-1">Churches</h5>
                    <span class="fw-600 fs-30">{{chuchinfo.ChurchCount}}</span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="bg-info bs-0 mb-20 clearfix">
                <div class="pull-left bg-op p-15 text-center">
                    <div class="easy-pie-chart fs-30" data-percent="75" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                        <i class="fa fa-user"></i>
                    </div>
                </div>
                <div class="pull-left p-10">
                    <h5 class="m-0 fs-16 text-uppercase lh-1">Members</h5>
                    <span class="fw-600 fs-30">{{chuchinfo.TotalMembers}}</span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="bg-green bs-0 mb-20 clearfix">
                <div class="pull-left bg-op p-15 text-center">
                    <div class="easy-pie-chart fs-30" data-percent="30" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                        <i class="fa fa-users"></i>
                    </div>
                </div>
                <div class="pull-left p-10">
                    <h5 class="m-0 fs-16 text-uppercase lh-1">Family</h5>
                    <span class="fw-600 fs-30">{{chuchinfo.TotalFamily}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-bottom:30px;">
        <div class="col-md-6" ng-if="churchworkervsDesignationvalues.length>0">
            <div id="container" style="height: 400px" churchworker axisvalues="churchworkervsDesignationvalues" ></div>
        </div>
        <div class="col-md-6">
            <div id="container1" style="height: 400px"></div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
    <div class="row">
        <div class="col-md-6">
            <div class="bg-white bs-0 mb-20 p-20">
                <div class="clearfix">
                    <h3 class="pull-left fs-16 lh-1 m-0 text-uppercase">Recent Activities</h3>
                    <div class="pull-right fs-16 lh-1">
                    </div>
                </div>
                <hr class="mt-10 mb-10">
                <div class="malihu-scrollbar" data-theme="light" data-auto-hide-scrollbar="true" data-scroll-amount="250" style="height: 368px;">
                    <ul class="activities list-unstyled widget-body malihu-scrollbar" data-theme="light" data-auto-hide-scrollbar="true" data-scroll-amount="250" style="height: 368px;">
                        <li class="" ng-class="{activity-info : data.ControllerActions.Priorty==1}" ng-repeat="data in RecentActivity">
                            <small class="text-muted">{{data.time}}</small>
                            <p class="text-info mb-0">{{data.NotificationString}}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="bg-white bs-0 mb-20 p-20">
                <div class="clearfix">
                    <h3 class="pull-left fs-16 lh-1 m-0 text-uppercase">Birthday</h3>
                    <div class="pull-right fs-16 lh-1">
                        <div class="btn-group">
                            <a href="#" class="text-black dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="zmdi zmdi-settings"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right animated fadeInLeft">
                                <li><a href="#">Send sms to all</a></li>
                                <li><a href="#">Send mail to all</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hr class="mt-10 mb-10">
                <div class="malihu-scrollbar" data-theme="light" data-auto-hide-scrollbar="true" data-scroll-amount="250" style="height: 368px;">
                    <div class="media mt-20" ng-show="BirthDay.length>0" ng-repeat="data in BirthDay">
                        <div class="media-left">
                            <a href="#">
                                <i class="fa fa-gift fs-36"></i>
                            </a>
                        </div>
                        <div class="media-body media-middle">
                            <p class="fs-16 fw-600 mb-0 pl-10"><a href="#">{{data.FullName}}</a> Celebrating {{data.CurrentAge}} th Birth Day <a><i class="fa fa-phone pull-right"></i></a><a><i class="fa fa-envelope pull-right"></i></a></p>
                            <p class="text-muted mb-0 pl-10">Family Head Name : {{data.Family.FamilyName}}</p>
                            <p class="fs-12 text-muted mb-0 pl-10">Today <a>{{data.Email}}</a>|<a> {{data.Phone}}</a></p>
                        </div>
                        <hr class="mt-10 mb-10">
                    </div>
                    <div class="media mt-20" ng-show="BirthDay.length==0">
                        <div class="media-left">
                            <a href="#">
                                <i class="fa fa-gift fs-36"></i>
                            </a>
                        </div>
                        <div class="media-body media-middle">
                            <p class="fs-16 fw-600 mb-0 pl-10">No One Celebrating Birthday Today</p>
                        </div>
                        <hr class="mt-10 mb-10">
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
    </div>
</div>
<script src="~/Content/Chart/highcharts.js"></script>
<script src="~/Content/Chart/highcharts-3d.js"></script>
<script src="~/Content/Chart/exporting.js"></script>
<script type="text/javascript">
$(function () {
    // Radialize the colors
    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: {
                cx: 0.5,
                cy: 0.3,
                r: 0.7
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
            ]
        };
    });

    // Build the chart
    Highcharts.chart('container1', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares. January, 2015 to May, 2015'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                    connectorColor: 'silver'
                }
            }
        },
        series: [{
            name: 'Brands',
            data: [
                { name: 'Microsoft Internet Explorer', y: 56.33 },
                {
                    name: 'Chrome',
                    y: 24.03,
                    sliced: true,
                    selected: true
                },
                { name: 'Firefox', y: 10.38 },
                { name: 'Safari', y: 4.77 }, { name: 'Opera', y: 0.91 },
                { name: 'Proprietary or Undetectable', y: 0.2 }
            ]
        }]
    });
});
</script>